<template>
	<div class="Earnings">
		<!-- 收益 -->
		<div class="content">
			<!-- 团长目前收益 -->
			<div class="box" v-if="colonel">
				<div class="box-head">收益提现</div>
				<div class="box-des">
					<div class="yi">
						<div>已提现</div>
						<div>¥{{Yipri}}</div>
					</div>
					<div class="ke">
						<div>可提现</div>
						<div>¥{{userKepri}}</div>
					</div>
				</div>
			</div>
			<!-- 自己目前收益 -->
			<div class="box" v-else-if="!colonel">
				<div class="box-head TZ-head">
					<div>收益提现</div>
					<div>您的收益</div>
					<div>{{highestName}}:{{percent}}收益</div>
				</div>
				<div class="box-des">
					<div class="yi">
						<div>已提现</div>
						<div>¥{{Yipri}}</div>
					</div>
					<div class="ke">
						<div>可提现</div>
						<div>¥{{userKepri}}</div>
					</div>
					<div class="colonel-ke">
						<div>可提现</div>
						<div>¥{{TZKepri}}</div>
					</div>
				</div>
			</div>
			<!-- 之前已提现过的 -->
			<div class="box" v-for="(item,index) in list" :key="index">
				<div class="box-head">{{item.title}}</div>
				<div class="box-des">
					<div class="shouRu">
						<div>订单收入</div>
						<div>¥{{item.SRpri}}</div>
					</div>
					<div class="fenCheng">
						<div>分成</div>
						<div>¥{{item.FCpri}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn">
			<el-button type="primary" plain @click="dialogFormVisible = true">立即提现</el-button>
		</div>
		
		<!-- 弹窗 -->
		<div class="tanChuang" v-show="dialogFormVisible">
			<div class="TC-box">
				<i class="el-icon-close" @click="dialogFormVisible=false"></i>
				<div class="TCtitle">申请提现</div>
				<div class="TCinput">
					<div>支付宝账号</div>
					<el-input v-model="form.id" autocomplete="off" placeholder="支付宝账号"></el-input>
				</div>
				<div class="TCinput">
					<div>姓名</div>
					<el-input v-model="form.name" autocomplete="off" placeholder="姓名"></el-input>
				</div>
				<div class="TCinput">
					<div>提现金额</div>
					<el-input v-model="form.pri" autocomplete="off" placeholder="提现金额"></el-input>
				</div>
				<div class="tan-des">请正确填写支付宝账号和金额，如果自己填错无法打款，后果自负</div>
				<div slot="footer" class="dialog-footer">
				    <el-button type="text" @click="tojilou" >提现记录</el-button>
				    <el-button size="small" @click="tiJiao">提 交</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Earnings',
		data(){
			return{
				highestName:'',
				colonel:false,//用来判断该用户是不是团长，不同盒子的显示
				percent:'70%',//团长百分比收益
				list:[],
				Yipri:'',//自己已提现的金额
				userKepri:'',//自己可提现的金额
				TZKepri:'',//团长可提现的金额
				dialogFormVisible:false,//用来控制弹窗的显示
				form: {
					id:'', //支付宝账号
					name: '', //姓名
					pri:'' //提现金额
				}
			}
		},
		methods:{
			tiJiao(){
				this.$http.post('applyWithdrawal',this.form).then((data)=>{
					var res = data.data;
					if(res.success){
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'success',
							offset:'65',
							duration:1000,
							onClose:()=>{
								this.dialogFormVisible = false;//关闭弹窗
								this.form.id = ''
								this.form.name = ''
								this.form.pri = ''
								this.getList()
							}
						});
					}else{
						this.$message.error(data.data.msg)
					}
				})
			},
			getList(){
				this.$http.get('getIncome').then((data)=>{
					var res = data.data;
					if(res.success){
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'success',
							offset:'65',
							duration:1000
						});
						this.list = res.data.list;
						this.colonel = res.data.group.colonel;
						this.Yipri = res.data.group.Yipri;
						this.userKepri = res.data.group.userKepri;
						this.TZKepri = res.data.group.TZKepri;
						this.highestName = res.data.group.highestName;
					}else{
						this.$message.error(data.data.msg)
					}
				})
			},
			tojilou(){
				this.$router.push('/Income/Record')
			}
		},
		created(){
			this.getList()
		}
	}
</script>

<style scoped>
	.box-des{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.content>.box{
		display: inline-block;
		vertical-align: middle;
	}
	.box{
		width: 400px;
		background-color: rgb(24,144,255);
		border-radius: 10px;
		color: #FFFFFF;
		margin: 30px 59px;
	}
	.box-head{
		padding: 10px;
		background-color: rgba(0,0,0,.3);
		border-radius: 10px 10px 0 0;
	}
	.shouRu>div,.fenCheng>div,.yi>div,.ke>div,.colonel-ke>div{
		margin: 10px 0;
		text-align: center;
	}
	.fenCheng>div:nth-child(2),.ke>div:nth-child(2){
		padding: 0 15px;
		background-color: #FFFFFF;
		color: red;
		border-radius: 4px;
	}
	/* 有团长的head */
	.TZ-head>div{
		display: inline-block;
		vertical-align: middle;
	}
	.TZ-head>div:nth-child(2){
		margin: 0 25px 0 88px;
	}
	.btn{
		width: 100%;
		text-align: center;
		margin-top: 40px;
	}
	
	/* 自定义弹窗 */
	.tanChuang{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.4);
		position: fixed;
		top: 0;
		left:0;
	}
	.TC-box{
		width: 540px;
		height: 300px;
		padding: 30px;
		background-color: #1890ff;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.el-icon-close{
		font-size: 20px;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.el-icon-close:hover{
		cursor: pointer;
	}
	.TCinput{
		display: flex;
		align-items: center;
		justify-content: start;
		margin: 20px 0 20px 20px;
	}
	.TCinput>div{
		width: 100px;
	}
	.TCinput>.el-input{
		width: 60%;
	}
	.TC-box>.TCinput:nth-of-type(3)>.el-input,.TC-box>.TCinput:nth-of-type(4)>.el-input{
		width: 40%;
	}
	.tan-des{
		font-size: 12px;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.dialog-footer>.el-button:nth-child(1){
		color: #FFFFFF;
		margin: 0 120px 0 20px;
	}
</style>
